<template>
    <div>
        <el-tooltip
        class="box-item"
        effect="dark"
        content="功能引导"
        placement="bottom"
      >
        <Guide style="width: 20px; height: 20px; transform: translateY(6px)" @click="startGuide"/>
      </el-tooltip>
    </div>
</template>

<script setup>
import Driver from "driver.js";
import {onMounted} from "vue"
import "driver.js/dist/driver.min.css"

// 导航列表
const arr = [
    {
        element:'#guide-start',
        popover:{
            title:'引导',
            description:'打开引导功能',
            position:'bottom-right'
        }
    },
    {
        element:'#guide-gohome',
        popover:{
            title:'跳转按钮',
            description:'跳转至个人中心',
            position:'bottom-left',
        }
    },
    {
        element:'#guide-breadcrumb',
        popover:{
            title:'面包屑',
            description:'指示当前页面的位置',
            position:'bottom-left',
        }
    },
    {
        element:'#guide-search',
        popover:{
            title:'搜索',
            description:'路由搜索',
            position:'bottom-right',
        }
    },
    {
        element:'#guide-fullscreen',
        popover:{
            title:'全屏',
            description:'页面显示切换',
            position:'right-right',
        }
    },
    {
        element:'#guide-tagview',
        popover:{
            title:'标签',
            description:'已打开页面标签',
            position:'right-right',
        }
    },
]

let driver = null

onMounted(()=>{
    driver = new Driver({
        allowClose:false,// 点击遮罩层是否关闭
        closeBtnText:'关闭',
        nextBtnText:'下一个',
        prevBtnText:'上一个',
        animate:true,
        onHighlighted(element){
            const node = element.node
        }
    })

})


const startGuide = ()=>{
    // 初始化
    driver.defineSteps(arr)
    driver.start()
}

</script>


<style lang="scss">

</style>